
<template>
  <!-- 玉米表单 -->
  <div class="iot-container">
    <!-- <div>玉米</div> -->
    <el-card
      :body-style="{
        padding: 0,
        margin: 15,
        borderRadius: '10px',
        borderRadius: '14px',
      }"
      shadow="always"
    >
      <div class="el-form">
        <el-form ref="form" :model="form" label-width="80px">
          <div class="demo" style="padding-left: 25px">
            <!-- 作物种类 -->

            <el-form-item label="作物种类" class="label">
              <el-select
                v-model="form.plantType"
                placeholder="请选择作物种类"
                style="width: 100%"
              >
                <el-option
                  v-for="item in OptionsList"
                  :key="item.plantCode"
                  :label="item.plantName"
                  :value="item.plantCode"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 作物品种 -->
            <el-form-item label="作物品种" class="label">
              <el-select
                v-model="form.plantVarieties"
                placeholder="请选择作物种类"
                style="width: 100%"
              >
                <el-option
                  v-for="item in VarietiesList"
                  :key="item.plantCode"
                  :label="item.plantName"
                  :value="item.plantCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="demo">
            <div class="input">
              <!-- 种植方式 -->
              <el-form-item label="种植方式" class="label" style="width: 100%">
                <el-input v-model="form.mode"></el-input>
              </el-form-item>
            </div>
            <div class="input">
              <!-- 种植密度 -->
              <el-form-item label="播种密度" class="label" style="width: 100%">
                <el-input
                  v-model="form.sowDensity"
                  size="medium"
                  placeholder="请输入5000-21000范围内数值（株/亩)"
                ></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="demo">
            <div class="input">
              <!-- 浇灌方式 -->
              <el-form-item label="浇灌方式" class="label" style="width: 100%">
                <el-input v-model="form.sowMode" size="medium"></el-input>
              </el-form-item>
            </div>
            <div class="input">
              <el-form-item label="是否覆膜" class="label" style="width: 100%">
                <el-select
                  v-model="form.mulching"
                  placeholder=""
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in mulchingList"
                    :key="item.plantCode"
                    :label="item.plantName"
                    :value="item.plantCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div class="demo">
            <div class="input">
              <el-form-item label="播种时间" class="label">
                <el-date-picker
                  v-model="form.sowDate"
                  type="date"
                  placeholder="选择日期"
                  style="width: 470px"
                >
                </el-date-picker>
              </el-form-item>
            </div>
            <div class="demo1" style="width: 100%">
              <el-form-item label="是否使用复合肥:" class="label">
                <el-select
                  v-model="form.whetherUse"
                  placeholder="请选择是否使用"
                >
                  <el-option
                    v-for="item in whetherUseList"
                    :key="item.plantCode"
                    :label="item.plantName"
                    :value="item.plantCode"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="复合肥类型:"
                class="label"
                style="margin-left: 15px"
              >
                <el-select
                  v-model="form.UseType"
                  placeholder="请选择复合肥类型:"
                >
                  <el-option
                    v-for="item in UseTypeList"
                    :key="item.plantCode"
                    :label="item.plantName"
                    :value="item.plantCode"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
      <div style="text-align: center; margin: 20px 0">
        <el-button type="success" @click="preservation()" style="width: 15%"
          >保存</el-button
        >
      </div>
    </el-card>
  </div>
</template>
<script>
import formSelect from "./form-select.vue";
export default {
  components: {
    formSelect
  },
  data() {
    return {
      form: {
        plantType: "1", //作物类型
        plantVarieties: "", //作物品种
        mulching: "0", //是否覆膜
        whetherUse: "", //是否使用复合肥
        UseType: "", //使用类型
        mode: "", //种植方式
        sowDensity: "", //播种密度
        sowMode: "", //灌溉方式
        sowDate: "" //播种时间
      },
      mulchingList: [], //是否覆膜
      OptionsList: [], // 作物种类
      VarietiesList: [], // 作物品种
      whetherUseList: [], //是否使用复合肥
      UseTypeList: [] //复合肥类型
    };
  },
  mounted() {
    // this.getPlantList();
    this.getAllTypeList();
  },
  methods: {
    handleClickDetail() { },
    getAllTypeList() {
      // 作物类型
      this.OptionsList = [
        {
          plantName: "棉花",
          plantCode: "0"
        },
        {
          plantName: "玉米",
          plantCode: "1"
        },
        {
          plantName: "水稻",
          plantCode: "2"
        }
      ];
      // 作物品种
      this.VarietiesList = [
        {
          plantName: "玉米1号",
          plantCode: "0"
        },
        {
          plantName: "玉米2号",
          plantCode: "1"
        },
        {
          plantName: "玉米3号",
          plantCode: "2"
        }
      ];
      // 是否覆膜
      this.mulchingList = [
        {
          plantName: "是",
          plantCode: "0"
        },
        {
          plantName: "否",
          plantCode: "1"
        }
      ];
      //是否使用复合肥类型
      this.whetherUseList = [
        {
          plantName: "是",
          plantCode: "0"
        },
        {
          plantName: "否",
          plantCode: "1"
        }
      ];
      //复合肥类型
      this.UseTypeList = [
        {
          plantName: "复合肥一号",
          plantCode: "0"
        },
        {
          plantName: "复合肥二号",
          plantCode: "1"
        }
      ];
    },
    // 保存
    preservation() { }
  }
};
</script>

<style scoped>
.demo {
  padding: 10px;
  display: flex;
  width: 100%;
}
/* .demo_{
  width: 50%;
} */
.demo1 {
  padding: 0 10px;
  display: flex;
}
.input {
  display: flex;
  margin-left: 15px;
  width: 50%;
}
.label {
  width: 50%;
  margin-top: 10px;
}
/deep/.el-input--small .el-input__icon {
  height: 20px;
}
/* /deep/.el-input--small .el-input__inner {
  width: 445px;
  height: 40px;
  margin-left: 20px;
} */
</style>
